import React, { Component } from 'react'
import { Carousel } from 'antd-mobile'
import './Banner.style.scss'

export default class Banner extends Component {
    render() {
      return (
          <Carousel
            autoplay={true}
            infinite={true}
            dotStyle={{width:"0.2rem",height:"0.05rem",borderRadius:"none"}}
            dotActiveStyle={{width:"0.3rem",height:"0.05rem",borderRadius:"none"}}
          >
            {this.props.banner&&this.props.banner.BANNER.map((val,index) => (
                <img
                key={index}
                  src={val.img}
                  alt={index}
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    window.dispatchEvent(new Event('resize'));
                  }}
                />
            ))}
          </Carousel>
      );
    }
  }